<template>
  <div class="mui-content">
      <!-- 拼单25天以后退款 -->
    <div  class="mui-slider mui-fullscreen">
        <div class="mui-slider-group">
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                <div id="scroll1" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <!--拼单订单-->
                        <div class="carlist biding">
                            <div class="c">
                                <ul>
                                  <li v-for="(v,i) in futuresList">
                                      <div>
                                          <crossLine style="position:relative;z-index:99"></crossLine>
                                          <div class="lstTop">
                                              <div class="titpic">
                                                  <img style="float:left;"  src="static/img/hqgic.png"  alt=""><span style="float:left;color:#333333;">江苏环球港汽车城</span><!--<span style="float:right;color:#ff6a27;">本车系10人在拼单</span>-->
                                                  <span  style="float:right">{{v.paymentNumber}}</span>
                                                  <img  v-if="v.state == 8" src="static/img/color_lost.png" style="position:absolute;margin-left:20px;margin-top:-5px;" />
                                              </div>
                                          </div>
                                          <!-- showDetails false时不能进去详情 -->
                                          <div class="lst" v-if="showDetails(v)" @tap="goCrowdDetails(v)">
                                              <div class="lstImg" v-if="v.pic==null || v.pic==''">
                                                  <img src="static/img/noCarPic.png">
                                              </div>
                                              <div class="lstImg" v-else>
                                                  <img :src="$store.state.appData.imgUrl+v.pic">
                                              </div>
                                              <div class="lstMsg">
                                                  <p class="carName">{{v.carName}}</p>
                                                  <p class="carColor">颜色:<span>{{v.color}}</span></p>
                                                  <p class="carPrice">指导价:{{v.guidePrice}}万
                                                      <span style="color:#ff6a27;float:right;">{{getBiddingStatus(v.state)}}</span>
                                                  </p>
                                              </div>
                                          </div>
                                          <div class="lst" v-else>
                                              <div class="lstImg" v-if="v.pic==null || v.pic==''">
                                                  <img src="static/img/noCarPic.png">
                                              </div>
                                              <div class="lstImg" v-else>
                                                  <img :src="$store.state.appData.imgUrl+v.pic">
                                              </div>
                                              <div class="lstMsg">
                                                  <p class="carName">{{v.carName}}</p>
                                                  <p class="carColor">颜色:<span>{{v.color}}</span></p>
                                                  <p class="carPrice">指导价:{{v.guidePrice}}万
                                                      <span style="color:#ff6a27;float:right;">{{getBiddingStatus(v.state)}}</span>
                                                  </p> 
                                              </div>
                                          </div>
                                           <div class="lstbottom" style="position:relative;"  v-show="v.state==6 || v.state==8 ">
                                               <!-- <div class="carNaked">
                                                  <p v-if="v.bidPrice">报价:￥{{v.bidPrice}}</p>
                                                  <p v-else  class="carNaked-left">正在询价，请耐心等待</p>
                                                  <p v-if="v.shareBillPrice">询价金:￥{{v.shareBillPrice}}</p>
                                                  <p v-else>无询价金</p>
                                                  <p v-if="v.netPrice">裸车价:￥{{v.netPrice}}</p>
                                                  <p v-else>暂无裸车价</p>
                                              </div> -->
                                              <p class="carMsg">&nbsp;</p>
                                              <p class="carColor" style="position:absolute;top:0px;">询价保证金:￥{{initPrice(v.orderPrice)}}</p>
                                              <div class="placeOrder unuse" :style=" v.state == 8 ?'':'right:70px'" @tap="cancelOrder(v,i)">取消拼单</div>
                                              <div class="placeOrder" @tap="goPayment(v)" v-show="v.state != 8">去付款</div>
                                          </div>
                                          <div class="lstbottom"   style="position:relative;" v-show=" v.differ !== null&& v.differ>= 0 && (v.state == 0 || v.state== 1 || v.state == 10)">  
                                              <p class="carMsg">&nbsp;</p>
                                              <div class="placeOrder unuse"  @tap="handleRefund(v)" >申请退款</div>
                                            </div>
                                      </div>
                                  </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--空时显示-->
        <div class="empty ng-scope" v-if="futuresList.length === 0 ">
            <div class="empty-item">
                <div class="icon-zanwudingdan-01" style="font-size:5rem;text-align:center;color:#999;">
                    
                </div>
                <div class="item-text">暂无相关订单</div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
/* 拼单状态
*  0 询价成功转入拼单
*  2 申请退款
*  3 退款正在处理...
*  4 退款成功
*  5 转入订单
*  6 微信调用支付失败
*/
import 'static/js/mui.pullToRefresh.js'
import 'static/js/mui.pullToRefresh.material.js'
import mui from 'static/js/mui'
import utils from '@/utils/utils'
import crossLine from '@/components/base/cross-line/cross-line'
import {findByCustomerIdShareBills, refund, removeShareBill} from '@/api/order'
import storage from '@/utils/localstorage'
export default {
  data() {
    return {
        cc:2,
        futuresList: [],
        userInfo: {},
        //询价事件请求参数
        pigingobj:{
            customerId: '',
            pageNow: 0,
            pageSize:5
        }
    };
  },
  components: {
      crossLine
  },
  props: {},
  watch: {
      
  },
  methods: {
    showDetails(v) {
        ////console.log(v)
        switch(v.state){
            case 0:
            return true;
            case 1:
            return true;
            case 9:
            return false;
        }
    },
    goCrowdDetails(v) {
        this.$router.push({
          name: "crowdDetails",
          params:{
            currentCar: v
          }
        })  
    },
    //如果订单支付失败 则重新支付
    goPayment(v) {
        //console.log(v)
        this.$router.push({
            name: "payAgain",
            params: {
                crowdOrderId: v.paymentNumber,
            }
        })
    },
    //取消拼单
    cancelOrder(v, i) {   
        removeShareBill({'shareBillId':v.id}).then(res=>{   
            //console.log(i)
            let that = this
            mui.alert('取消拼单成功！:', '', ['确定'],function() {
                //console.log(that.futuresList)
                that.futuresList.splice(i, 1);
                //that.futuresList['i'].state = 9 
                //that.$nextTick()
               // that.$set(that.futuresList,i,'')
            },'div');
        })
    },
    initPrice(price) {
        let priceVal = utils.formatMoney(price,2)
        return priceVal
    },
    // //获取拼单数据
    // getBidding() {
    //     //获取store里面的user不是实时，所以采用localstorge规避bug
    //     this.userInfo = storage.getLocalstorage('user')
    //     this.pigingobj.customerId = this.userInfo.id
    //     this.pageNowPlus()
    // },
    // pageNowPlus() {
    //     this.pigingobj.pageNow++
    //     findByCustomerIdShareBills(this.pigingobj).then(res =>{
    //         //console.log(res)
    //         //这边要完成询价后才能有数据    
    //         this.futuresList = res.data.shareBills
            
    //     })
    // },
    //判断是什么询价状态
    getBiddingStatus(status) {
        switch(status){
            case 0:
            return '询价金付款成功'
            case 1:
            return '询价金付款成功'
            case 2:
            return '申请退款中...'
            case 3:
            return '正在处理退款...'
            case 4:
            return '已退款成功'
            case 6:
            return '询价金付款失败'
            case 8:
            return '询价金付款失败'
        }
    },
    // 下单页面 支付下单金额 
    // placeOrder(v){
    //     // //console.log(v)
    //     this.$router.push({
    //         name: "crowdOrderpo",
    //         params: {
    //             carParams: v,
    //         }
    //     })
    // },
    //退款
    handleRefund(v) {
        this.$router.push({
            name: 'applyDrawback',
            params: {
                currentCar: v
            }
        })
        let that = this
        /* refund({'paymentNumber': re}).then(res=>{
            if(res.msg == 'success'){
                mui.alert('退款申请成功！', '提示', ['确定'], function() {
                    that.futuresList[i].state = 2
                },'div')
            }
        }) */
        
    },
    //转入拼单
    affirmCrowdorder(v) {
        if(!v.bidPrice){
            mui.alert('无报价，无法转入拼单！', '提示', ['确定'], function() {},'div')
            return
        }
        this.$router.push({
            name: "affirmCrowdorder",
            params: {
                carParams: v,
                customerId: this.userInfo.id
            }
        })
    },
    // 创建页面时首次加载数据
    getFirstData() {
        this.pigingobj.pageNow++//当前页++
        this.userInfo = storage.getLocalstorage('user')
        this.pigingobj.customerId = this.userInfo.id
        //下拉刷新的时候如果参数当前页(pageNow)大于总页数那么禁止上拉加载
        findByCustomerIdShareBills(this.pigingobj).then(resp => {//请求数据
            this.cc=resp.data.page.totalPageCount
            if(resp.msg=="success"){
                this.futuresList = this.futuresList.concat(resp.data.shareBills)
            }else{
                //console.log("接口不通")
            }
        })
    }
  },
  filters: {},
  computed: {},
  created() {
      //获取拼单数据
      this.getFirstData()
  },
  mounted() {
    var that=this
    mui.init({
        keyEventBind: {
            backbutton: true  //关闭back按键监听
        }    
    });
    (function($) {
        //阻尼系数
        var deceleration = mui.os.ios?0.003:0.0009;
        $('.mui-scroll-wrapper').scroll({
            bounce: false,
            indicators: true, //是否显示滚动条
            deceleration:deceleration
        });
        $.ready(function() {
            //循环初始化所有下拉刷新，上拉加载。
            $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
                $(pullRefreshEl).pullToRefresh({
                    //下拉刷新
                    down: {
                        callback: function() {
                            var self = this;
                            //判断上拉加载的时候如果参数当前页(pageNow)大于总页数那么禁止下拉加载并且返回不执行下面的代码
                            //if(that.pigingobj.pageNow>that.cc){
                                //显示正在刷新后合上的动画效果  就是关闭刷新的
                            //    self.endPullDownToRefresh();
                            //    return
                            //}
                            setTimeout(function() {
                                // mui.toast("为你推荐了5篇文章");
                                that.pigingobj.pageNow = 1
                                that.userInfo = storage.getLocalstorage('user')
                                that.pigingobj.customerId = that.userInfo.id
                                findByCustomerIdShareBills(that.pigingobj).then(resp => {
                                    that.cc=resp.data.page.totalPageCount
                                    if(resp.msg=="success"){
                                         that.futuresList = resp.data.shareBills
                                       /*  for(var i  in  resp.data.shareBills){
                                            //这里的意思就是在数组的起始位置添加元素 而且是一个个添加
                                            that.futuresList.unshift(resp.data.shareBills[i])
                                        } */
                                    }else{
                                        //console.log("接口不通")
                                    }
                                })
                                self.endPullDownToRefresh();
                            }, 800);
                        }
                    },
                    //上拉加载
                    up: {
                        auto:false,//一加载页面 就执行一次
                        height:50,// 可选.默认50.触发上拉加载拖动距离
                        contentrefresh: '正在加载...',
                        contentnomore:'没有更多数据了',// 可选，请求完毕若没有更多数据时显示的提醒内容；
                        callback: function() {
                            var self = this;
                            //判断下拉刷新的时候如果参数当前页(pageNow)大于总页数那么禁止上拉加载并且返回不执行下面的代码
                            if(that.pigingobj.pageNow>that.cc){
                                self.endPullUpToRefresh((that.pigingobj.pageNow>that.cc));
                                return
                            }
                            setTimeout(function() {
                                that.pigingobj.pageNow++//当前页++
                                that.userInfo = storage.getLocalstorage('user')
                                that.pigingobj.customerId = that.userInfo.id
                                //下拉刷新的时候如果参数当前页(pageNow)大于总页数那么禁止上拉加载
                                findByCustomerIdShareBills(that.pigingobj).then(resp => {//请求数据
                                    //console.log(resp)
                                    that.cc=resp.data.page.totalPageCount
                                    if(resp.msg=="success"){
                                        //for(var i  in  resp.data.shareBills){
                                            //遍历所有请求后拿过来的数据 然后将数据一个个放入新的数组中来刷新数据
                                        that.futuresList = that.futuresList.concat(resp.data.shareBills)
                                            //that.futuresList.push(resp.data.shareBills[i])
                                        //}
                                        // //console.log(that.bidingList)
                                    }else{
                                        //console.log("接口不通")
                                    }
                                })
                                self.endPullUpToRefresh((that.pigingobj.pageNow>that.cc));
                            }, 800);
                        }
                    }
                });
            });
            
        });
    })(mui);
    //首页返回键处理
    //处理逻辑：1秒内，连续两次按返回键，则退出应用；
    var first = null;
    mui.back = function() {
        //首次按键，提示‘再按一次退出应用’
        if (!first) {
            first = new Date().getTime();//记录第一次按下回退键的时间
            mui.toast('再按一次退出应用');//给出提示
            // history.go(-1)//回退到上一页面
            setTimeout(function() {//1s中后清除
                first = null;
            }, 1000);
        } else {
            if (new Date().getTime() - first < 1000) {//如果两次按下的时间小于1s，
                plus.runtime.quit();//那么就退出app
    } } };
  },
};

</script>


<style lang="scss" scoped>
    .mui-bar-nav ~ .mui-content {
        padding-top:0px; 
    }
    /*订单*/
    .placeOrder{
        border-radius: 3px;
        //background:#ff6a27;
        color: #ff6a27;
        position: absolute;
        right:10px;
        top: 6px;
        padding: 0px 5px 0px 5px;
        font-size: 0.6rem;
        border: 1px solid #ff6a27;
    }
    .confirmDel {
        border-radius: 3px;
        border: 1px solid #ccc;
        color: #8f8f94;
        position: absolute;
        right:140px;
        top: 41px;
        padding: 0px 5px 0px 5px;
        font-size: 0.6rem;
    }
    /*转入拼单*/
    .affirmCrowdorder {
        border-radius: 3px;
        border: 1px solid #ff6a27;
        color: #ff6a27;
        position: absolute;
        right:75px;
        top: 41px;
        padding: 0px 5px 0px 5px;
        font-size: 0.6rem;
    }
    /*点击后的样式*/
    .active {
        color: #ff6a27;
        border-bottom: 1px solid #ff6a27;
    }
    /*下单样式*/
    .order-from {
        .order-nav {
            width: 100%;
            height: 2rem;
            background: #fff;
            display: flex;
            text-align: center;
            font-size: 0.7rem;
            border-bottom: 1px solid #e9e9e9;
            .tab-itm {
                flex: 1;
                line-height: 2rem;
            }
        }
    }
    /*车型选择*/
    .carlist {
        margin-top:40px;
        width: 100%;
        .lst {
            width: 100%;
            background: #fbfbfb;
            overflow: hidden;
            padding: 10px 12px 0px 12px;
            .lstImg {
                width: 38%;
                float: left;
                text-align: center;
                img {
                    width:120px;
                    vertical-align: middle;
                }
            }
            .lstMsg {
                width:62%;
                float: left;
                height: 100%;
                padding: 6px 0px 5px 15px;
                p {
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-wrap: break-word;
                    word-break: normal;
                    margin-bottom: 10px;
                }
            }
        }
        .lstbottom {
            width: 100%;
            background: #fff;
            overflow: hidden;
            padding: 0px 12px 0px 12px;
            p {
                margin-bottom: 0px;
                line-height: 35px;
            }
        }
        .lstTop{
            width:100%;
            background:#fff;
            font-size:0.6rem;
            line-height:36px;
            .titpic {
                overflow:hidden;
                padding:0px 12px 0px 8px;
                img{
                    width:36px;
                    height:36px;
                    margin-right:5px;
                    margin-top:3px;
                }
            }
            
        }
    }
    .carName {
        font-size: 0.7rem;
        color: #333;
        line-height: 15px;
        height: 28px;
    }

    .carColor {
        font-size: 0.6rem;
        line-height: 15px;
    }

    .carPrice {
        font-size: 0.6rem;
        line-height: 15px;
    }

    .carNaked {
        text-align: right;
        border-bottom: 1px solid #f0f0f0;
        font-size: 0.7rem;
        color: #333;
    }
    .carNaked-left{
        float:left;
        color:#666666;
        font-size:12px;
        margin-left:0px;
    }

    /* 商品空时 */
    .empty {
        position: relative;
        display: block;
        width: 100%;
        position:absolute;
        top:40px;
        z-index:99;
        bottom:0px;
        overflow: hidden;
        background:#fff;
    }

    .empty .empty-item {
        position: absolute;
        left: 0;
        top: 35%;
        display: block;
        width: 100%;
    }

    .empty .empty-item .item-logo {
        display: block;
        margin: 0 auto;
        width: 80px;
        height: 80px;
    }

    .empty .empty-item .item-text {
        display: block;
        height: 32px;
        line-height: 32px;
        color: #aaaaaa;;
        font-size: 14px;
        font-weight: normal;
        overflow: hidden;
        text-align: center;
    }   
    .carNaked p{
        display: inline-block;
        margin-left:10px;
    }
    .unuse{
        border: 1px solid #ccc!important;
        color: #8f8f94!important;
    }
</style>